<template>
  <div class="carousel-group">
    <div class="list-serach">
      <a-input-search
        size="default"
        v-model="proId"
        placeholder="请输入项目id"
        enter-button
        @search="searchByProId"
      />
      <a-button type="primary" @click="resetSearch">重置搜索条件</a-button>
    </div>
    <main class="main">
      <div>
        <a-table
          :data-source="groupList"
          :columns="datasFomat"
          :rowKey="(record) => record.id"
          :pagination="false"
          :scroll="{ y: 400 }"
        >
          <template slot="createdAt" slot-scope="text, record">
            <span>{{ record.createdAt }}</span>
          </template>
          <!-- 操作 -->
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm
              placement="bottom"
              title="确认删除？（分组下轮播图也会被删除）"
              ok-text="确认"
              cancel-text="取消"
              @confirm="delgroup(record.id)"
            >
              <a-button type="danger" icon="delete"> 删除 </a-button>
            </a-popconfirm>
            <a-button
              type="primary"
              icon="eye"
              @click="showCarouselModal(record)"
            >
              查看轮播图
            </a-button>
          </template>
        </a-table>
      </div>
    </main>
    <a-pagination
      class="pageTab"
      :current="current"
      :page-size-options="pageSizeOptions"
      :total="count"
      :show-total="(total) => `共 ${count} 个分类`"
      :page-size="limit"
      :default-current="1"
      show-size-changer
      @showSizeChange="onShowSizeChange"
      @change="pageChange"
    />
    <!-- 查看分组下轮播图 -->
    <a-modal
      centered
      :title="groupTitle"
      v-model="carouselVisible"
      :footer="null"
    >
      <p v-if="currentCarouselPic.length == 0">当前分组下无轮播图</p>
      <a-list
        :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
        v-if="currentCarouselPic.length != 0"
        :dataSource="currentCarouselPic"
      >
        <a-list-item slot="renderItem" slot-scope="item" :rowKey="item.id">
          <template>
            <a-popover :title="'轮播图id:' + item.id" class="meta-content">
              <template slot="content">
                <p>分组id:{{ item.carouselGroupId }}</p>
              </template>
              <a-card :hoverable="true">
                <a-avatar
                  shape="square"
                  class="card-avatar"
                  slot="cover"
                  :src="item.url"
                />
                <a slot="actions" @click="del(item.id)">删除</a>
              </a-card>
            </a-popover>
          </template>
        </a-list-item>
      </a-list>
    </a-modal>
    <!-- 删除轮播图modal框 -->
    <a-modal
      centered
      title="删除当前轮播图"
      v-model="delModalVisible"
      @ok="delCarousel"
      @cancel="delNo"
    >
      <p>此操作不可逆！确认删除？</p>
    </a-modal>
  </div>
</template>

<script>
import {
  getAllCarouselGroupAdminApi,
  getAllCarouselGroupByProjectIdApi,
  deleteCarouselGroupApi,
  deleteCarouselApi,
} from "@/services/superAdmin";
import moment from "moment";
import { message } from "ant-design-vue";

export default {
  data() {
    return {
      datasFomat: [
        {
          title: "分组id",
          dataIndex: "id",
          align: "center",
          width: 100,
        },
        {
          title: "分组名",
          dataIndex: "name",
          align: "center",
          width: 200,
        },
        {
          title: "项目id",
          dataIndex: "projectId",
          align: "center",
          width: 100,
        },
        {
          title: "项目名",
          dataIndex: "projectName",
          align: "center",
          width: 200,
        },
        {
          title: "创建时间",
          dataIndex: "createdAt",
          align: "center",
          scopedSlots: {
            //  暴露作用域插槽
            customRender: "createdAt", //   暴露作用域插槽名 向外暴露 当前行的值,数据，索引 text record index
          },
        },
        {
          title: "操作",
          align: "center",
          scopedSlots: {
            customRender: "operation",
          },
        },
      ],
      groupList: [],
      proId: "", //项目id
      delModalVisible: false,
      carouselVisible: false,
      currentCarouselPic: [],
      delId: "",
      groupTitle: "",
      /* 分页相关 */
      current: 1, //当前页面
      pageSizeOptions: ["5", "10", "15", "20", "25"], //每页显示数量
      count: 0, //分组总数量
      limit: 5,
      offset: 0,
      projectId: "", //传递来的项目id
    };
  },
  created() {
    if (this.$route.query.id) {
      this.proId = this.$route.query.id;
      this.searchByProId(this.limit, 0);
    } else {
      this.getAllCarouselGroupAdmin(this.limit, 0);
    }
  },
  methods: {
    // 重置搜索
    resetSearch() {
      this.proId = "";
      this.getAllCarouselGroupAdmin(this.limit, 0);
      this.$message.success(`重置搜索条件成功`, 1.5);
    },
    // 获取所有分组和轮播图
    getAllCarouselGroupAdmin(limit, offset) {
      getAllCarouselGroupAdminApi({
        limit,
        offset,
      }).then((res) => {
        res.data.rows.forEach((ele) => {
          ele.createdAt = moment(ele.createdAt).format("YYYY-MM-DD  HH:mm:ss");
        });
        this.groupList = res.data.rows;
        this.count = res.data.count;
      });
    },
    // 按projectID获取轮播图列表
    async searchByProId(limit, offset) {
      if (!this.proId) {
        return;
      }
      let result = await getAllCarouselGroupByProjectIdApi({
        id: this.proId,
        limit,
        offset,
      });
      if (result.data.count === 0) {
        message.error("该项目下未创建轮播图及分组");
        this.proId = "";
      }
      result.data.rows.forEach((ele) => {
        ele.createdAt = moment(ele.createdAt).format("YYYY-MM-DD  HH:mm:ss");
        ele.projectName = result.data.projectName;
      });
      this.groupList = result.data.rows;
      this.count = result.data.count;
    },
    // 删除分组
    delgroup(id) {
      deleteCarouselGroupApi({
        id,
      }).then((res) => {
        if (res.code === 200) {
          /* 请求成功 删除成功 */
          message.success(res.msg);
          this.groupList = this.groupList.filter((item) => {
            return item.id !== id;
          });
        } else {
          message.error(res.msg);
        }
      });
      if (this.proId) {
        this.searchByProId(this.limit, this.offset);
      } else {
        this.getAllCarouselGroupAdmin(this.limit, this.offset);
      }
      this.carouselVisible = false;
    },
    del(id) {
      this.delModalVisible = true;
      this.delId = id;
    },
    // 删除轮播图
    delCarousel() {
      deleteCarouselApi({
        id: this.delId,
      }).then((res) => {
        if (res.code === 200) {
          /* 请求成功 删除成功 */
          message.success(res.msg);
          this.currentCarouselPic = this.currentCarouselPic.filter((item) => {
            return item.id !== this.delId;
          });
          if (this.proId) {
            this.searchByProId(this.limit, this.offset);
          } else {
            this.getAllCarouselGroupAdmin(this.limit, this.offset);
          }
        } else {
          message.error(res.msg);
        }
      });
      this.delId = "";
      this.delModalVisible = false;
      this.carouselVisible = false;
    },
    delNo() {
      this.delModalVisible = false;
    },
    // 查看分组下轮播图
    showCarouselModal(recored) {
      this.groupTitle = recored.name;
      this.carouselVisible = true;
      this.currentCarouselPic = this.groupList.find(
        (ele) => ele.id == recored.id
      ).Carousels;
    },
    /*分页 */
    onShowSizeChange(current, pageSize) {
      this.limit = pageSize;
      this.pageChange(current);
    },
    pageChange(current) {
      this.current = current;
      this.offset = (this.current - 1) * this.limit;
      if (this.proId) {
        this.searchByProId(this.limit, this.offset);
      } else {
        this.getAllCarouselGroupAdmin(this.limit, this.offset);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-serach {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  .ant-input-search {
    width: 200px;
  }
}
.card-avatar {
  width: 100%;
  height: 200px;
}
p {
  text-align: center;
}
button {
  margin-right: 10px;
}
.pageTab {
  margin-top: 10px;
}
::v-deep .ant-table-body {
  background-color: white;
}
</style>